<!--
  ~ This program is part of the OpenLMIS logistics management information system platform software.
  ~ Copyright © 2013 VillageReach
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~  
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see http://www.gnu.org/licenses.  For additional information contact info@OpenLMIS.org. 
  -->

<div xmlns="http://www.w3.org/1999/html" tab-scroll>
  <div ng-hide="facility.id"><h2 id="addNewFacilityHeader" openlmis-message="create.facility.addNew"></h2></div>
  <div ng-show="facility.id">
    <h2 id="edit-facility-header" openlmis-message="label.facility.edit"></h2>
  </div>

  <form ng-submit="saveFacility()" id="create-facility" name="facilityForm" novalidate>
    <div class="app-form">

      <div class="form-group">

        <h3 openlmis-message="label.basicInformation"></h3>


        <div class="form-row clearfix">
          <div class="form-cell">
            <label for="code">
              <span openlmis-message="create.facility.code"></span>
              <span class="label-required"> *</span>
            </label>

            <div class="form-field">
              <input ng-model="facility.code" name="code" id="code" type="text" maxlength="50" ng-required="true"/>
        <span class="field-error" ng-show="facilityForm.code.$error.required && showError"
              openlmis-message="missing.value">

        </span>
            </div>
          </div>

          <div class="form-cell">
            <label for="gln" openlmis-message="create.facility.gln"></label>

            <div class="form-field">
              <input ng-model="facility.gln" id="gln" type="text" maxlength="30"/>
            </div>
          </div>
        </div>

        <div class="form-row clearfix">
          <div class="form-cell">
            <label for="name">
              <span openlmis-message="create.facility.name"></span>
              <span class="label-required"> *</span>
            </label>

            <div class="form-field">
              <input ng-model="facility.name" name="name" id="name" type="text" maxlength="50" ng-required="true"/>
        <span class="field-error" ng-show="facilityForm.name.$error.required && showError"
              openlmis-message="missing.value">

        </span>
            </div>
          </div>

          <div class="form-cell">
            <label for="facility-type">
              <span openlmis-message="label.facility.type"></span>
              <span class="label-required"> *</span>
            </label>

            <div class="form-field">
              <select name="facilityType" id="facility-type" ng-model="facility.facilityType.code"
                      ng-options="i.code as i.name for i in facilityTypes" ng-required="true">
                <option value="" openlmis-message="create.facility.select.facilityType"></option>
              </select>
        <span class="field-error" ng-show="facilityForm.facilityType.$error.required && showError"
              openlmis-message="select.value">
        </span>
            </div>
          </div>
        </div>

        <div class="form-row clearfix">
          <div class="form-cell">
            <label for="operated-by" openlmis-message="create.facility.operatedBy"></label>

            <div class="form-field">
              <select id="operated-by" ng-model="facility.operatedBy.code"
                      ng-options="i.code as i.text for i in facilityOperators">
                <option value="" openlmis-message="create.facility.select.operatedBy"></option>
              </select>
            </div>
          </div>
        </div>

        <div class="form-row clearfix">
          <div class="form-cell">
            <label>
              <span openlmis-message="create.facility.serviceDeliveryPoint"></span>
              <span class="label-required"> *</span>
            </label>

            <div class="form-field radio-group">
              <input id="facilitySdpTrue" type="radio" name="isSdp" ng-value="true" ng-model="facility.sdp"
                     ng-required="facility.sdp === null || facility.sdp === undefined"/>
              <strong openlmis-message="button.yes"></strong>
              &nbsp; &nbsp; &nbsp;
              <input ng-model="facility.sdp" type="radio" name="isSdp" ng-value="false"/>
              <strong openlmis-message="button.no"></strong>
        <span class="field-error" ng-show="facilityForm.isSdp.$error.required && showError"
              openlmis-message="select.value">
        </span>
            </div>
          </div>

          <div class="form-cell">
            <label>
              <span openlmis-message="create.facility.activeFacility"></span>
              <span class="label-required"> *</span>
            </label>

            <div class="form-field radio-group">
              <input id="facilityActiveTrue" ng-model="facility.active" type="radio" name="isActive" ng-value="true"
                     ng-required="facility.active == null || facility.active == undefined"/>
              <strong openlmis-message="button.yes"></strong> &nbsp; &nbsp; &nbsp;
              <input id="facilityActiveFalse" ng-model="facility.active" type="radio" name="isActive"
                     ng-value="false"/>
              <strong openlmis-message="button.no"></strong>
        <span class="field-error" ng-show="facilityForm.isActive.$error.required && showError"
              openlmis-message="select.value">
        </span>
            </div>
          </div>
        </div>

        <div class="form-row clearfix">
          <div class="form-cell">
            <label for="go-live-date">
              <span openlmis-message="create.facility.goLiveDate"></span>
              <span class="label-required"> *</span>
            </label>

            <div class="form-field">
              <input ng-model="facility.goLiveDate" name="goLiveDate" id="go-live-date" type="text"
                     ui-date="{dateFormat: 'dd/mm/yy', changeYear: true}" ui-date-format="yy-mm-dd"
                     readonly ng-change="blurDateFields()" ng-required="true"/>
        <span class="field-error" ng-show="facilityForm.goLiveDate.$error.required && showError"
              openlmis-message="missing.value">
        </span>
            </div>
          </div>

          <div class="form-cell">
            <label for="go-down-date" openlmis-message="create.facility.goDownDate"></label>

            <div class="form-field">
              <input ng-model="facility.goDownDate" id="go-down-date" type="text"
                     ui-date="{dateFormat: 'dd/mm/yy', changeYear: true}" ui-date-format="yy-mm-dd"
                     readonly ng-change="blurDateFields()"/>
            </div>
          </div>
        </div>

        <div class="form-row clearfix">
          <div class="form-cell full-width">
            <label for="description" openlmis-message="create.facility.description"></label>

            <div class="form-field">
              <input ng-model="facility.description" id="description" type="text" maxlength="250"/>
            </div>
          </div>
        </div>
      </div>
      <!-- /form-group -->

      <div class="form-group">
        <h3 openlmis-message="create.facility.contactInformation"></h3>

        <div class="form-row clearfix">
          <div class="form-cell">
            <label for="address-1" openlmis-message="create.facility.addressLine1"></label>

            <div class="form-field">
              <input ng-model="facility.address1" id="address-1" type="text" maxlength="50"/>
            </div>
          </div>
        </div>

        <div class="form-row clearfix">
          <div class="form-cell">
            <label for="address-2" openlmis-message="create.facility.addressLine2"></label>

            <div class="form-field">
              <input ng-model="facility.address2" id="address-2" type="text" maxlength="50"/>
            </div>
          </div>
        </div>

        <div class="form-row clearfix">
          <div class="form-cell">
            <label for="main-phone" openlmis-message="create.facility.phone"></label>

            <div class="form-field">
              <input ng-model="facility.mainPhone" id="main-phone" type="text" maxlength="20"/>
            </div>
          </div>
        </div>

        <div class="form-row clearfix">
          <div class="form-cell">
            <label for="fax-phone" openlmis-message="create.facility.fax"></label>

            <div class="form-field">
              <input ng-model="facility.fax" id="fax-phone" type="text" maxlength="20"/>
            </div>
          </div>
        </div>

      </div>
      <!-- /form-group -->

      <div class="form-group">
        <h3 openlmis-message="create.facility.programsSupported"></h3>

        <div class="form-row clearfix">
          <div class="form-cell programs-table">
            <table class="table table-striped table-bordered">
              <thead>
              <tr>
                <th openlmis-message="create.facility.programs"></th>
                <th openlmis-message="create.facility.active"></th>
                <th openlmis-message="create.facility.startDate"></th>
                <th openlmis-message="create.facility.programType"></th>
                <th></th>
              </tr>
              </thead>
              <tbody>
              <tr ng-repeat="supportedProgram in facility.supportedPrograms">
                <td ng-bind="supportedProgram.program.name" programId="{{supportedProgram.program.id}}"></td>
                <td><input ng-model="supportedProgram.active" id="" type="checkbox" value="true"/></td>
                <td ng-init="supportedProgram.editedStartDate = supportedProgram.startDate">
                  <input type="text" ng-model="supportedProgram.editedStartDate"
                         readonly
                         ui-date="{dateFormat:'dd/mm/yy', changeYear: true}"
                         ui-date-format="yy-mm-dd"
                         ng-required="supportedProgram.active == true"
                         ng-change="showConfirmDateChangeWindow(supportedProgram)"/>
                    <span class="field-error" ng-show="supportedProgram.active && !supportedProgram.startDate && showError"
                          openlmis-message="create.facility.mandatoryStartDate">
                    </span>
                </td>
                <td>
                  <span ng-show="supportedProgram.program.push"  openlmis-message="label.allocate"></span>
                  <span ng-show="!supportedProgram.program.push" openlmis-message="label.request"></span>
                    <span>
                      (<a id="overrideIsa{{ supportedProgram.program.name }}" href=""
                          ng-click="showISAEditModal(supportedProgram)" openlmis-message="override.isa.values"></a>)
                    </span>
                </td>

                <td><a href="" class="close" id="remove{{$index}}"
                       ng-click="showRemoveProgramConfirmDialog(supportedProgram)"
                       openlmis-message="create.facility.removeProgram"></a></td>
              </tr>
              <tr class="add-supported-program-row">
                <td>
                  <select id="programs-supported" ng-model="supportedProgram.program.id"
                          ng-options="i.id as i.name for i in programsToDisplay">
                    <option value="" openlmis-message="programSupportedMessage"></option>
                  </select>
                </td>
                <td><input type="checkbox" ng-model="supportedProgram.active" id="supported-program-active"
                           ng-disabled="!supportedProgram.program.id"/></td>
                <td><input type="text" id="supported-program-start-date" name="supportedProgram"
                           ng-model="supportedProgram.editedStartDate"
                           readonly
                           ng-change="showConfirmDateChangeWindow(supportedProgram)"
                           ui-date="{dateFormat:'dd/mm/yy', changeYear: true}"
                           ui-date-format="yy-mm-dd"
                           ng-disabled="!supportedProgram.program.id"/>
            <span class="field-error" ng-show="showDateNotEnteredError"
                  openlmis-message="create.facility.mandatoryStartDate">
            </span>
                </td>
                <td></td>
                <td><input type="button" class="btn btn-primary" id="supported-program-add"
                           openlmis-message="button.add"
                           ng-disabled="!supportedProgram.program.id"
                           ng-click="addSupportedProgram(supportedProgram)"></td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

       <div id="overrideIsaModal" modal="programProductsISAModal" options="{'backdrop':'static', 'escape':false}" ng-controller="FacilityIsaModalController">

        <form name="IsaProductListForm">
          <div class="modal-header">
            <h3>
              <span openlmis-message="label.isa.header"></span>
              <span ng-bind="currentProgram.name"></span>
            </h3>
          </div>

          <div class="modal-body">
            <div ng-hide="currentProgramProducts.length > 0" openlmis-message="message.no.products.mapped" class="alert alert-info"></div>
            <div ng-show="currentProgramProducts.length > 0">
              <div class="row-fluid">
                <div class="pull-right">
                  <input id="searchProduct" class="search-query" type="text" ng-model="query"
                         ng-change="updateCurrentProgramProducts()"
                         openlmis-message="placeholder.filter.products"/>
                </div>
              </div>

              <!-- Do not delete; intended for the non-VIMS use -->
              <!--
              <div id="overrideIsaTable">
                <div class="list-header-container">
                  <div class="row-fluid list-header">
                    <div class="span4">
                      <span class="first-column" openlmis-message="label.product"></span>
                    </div>
                    <div class="span2" openlmis-message="default.isa"></div>
                    <div class="span2" openlmis-message="label.overridden.isa"></div>
                    <div class="span4"></div>
                  </div>
                </div>

                <div class="list-container ">
                  <div ng-repeat="programProduct in filteredProducts">
                    <div class="row-fluid list-row" productId="{{programProduct.product.id}}">
                      <div class="span4">
                        <span class="first-column" id="product-name{{$index}}" ng-bind="programProduct.product.primaryName"></span>
                      </div>
                      <div class="span2">
                        <span id="calculated-isa{{$index}}">{{programProduct.calculatedIsa}}</span>
                      </div>
                      <div class="span2" ng-form="overrideForm">
                          <span id="overridden-isa{{$index}}">{{programProduct.calculatedFacilityIsa}}</span>
                      </div>

                      <div class="span4 use-calculated-isa-column">
                          <input type="button" class="btn" id="delete-overriden-isa-button{{$index}}"
                                 ng-click="deleteProductISA(programProduct, facility, $index)"
                                 openlmis-message="button.delete" />

                          <input type="button" class="btn" id="override-isa-values-button{{$index}}"
                                 ng-click="showProductISA(programProduct, $index)"
                                 openlmis-message="override.isa.values"/>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              -->

              <!--Begin: For VIMS use -->
              <div id="overrideIsaTable">
                <div class="list-header-container">
                  <div class="row-fluid list-header">
                    <div class="span3">
                      <span class="first-column" openlmis-message="label.product"></span>
                    </div>
                    <div class="span5" openlmis-message="label.overridden.isa"></div>
                    <div class="span4"></div>
                  </div>
                </div>

                <div class="list-container ">
                  <div ng-repeat="programProduct in filteredProducts">
                    <div class="row-fluid list-row" productId="{{programProduct.product.id}}">
                      <div class="span3">
                        <span class="first-column" id="product-name{{$index}}" ng-bind="programProduct.product.primaryName"></span>
                      </div>

                      <div class="span5">
                        <span style="white-space: nowrap;" id="calculated-isa{{$index}}">{{programProduct.overriddenIsaFormula}}</span>
                      </div>

                      <div class="span4 use-calculated-isa-column">
                          <input type="button" id="delete-overriden-isa-button{{$index}}"
                                 class="btn btn-small"   style="margin-left: 0px;"
                                 ng-click="deleteProductISA(programProduct, facility, $index)"
                                 openlmis-message="button.delete" />

                          <input type="button"  id="override-isa-values-button{{$index}}"
                                 class="btn btn-small"    style="margin-left: 0px;"
                                 ng-click="showProductISA(programProduct, $index)"
                                 openlmis-message="override.isa.values"/>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!--End: For VIMS use-->

            </div>
          </div>

          <div class="modal-footer">
            <input id="isaDoneButton" type="button" class="btn btn-primary" openlmis-message="button.ok" ng-click="closeISAModal()"/>
          </div>

        </form>
      </div>

      <!-- /form-group -->

      <div class="form-group">
        <h3 openlmis-message="create.facility.geographicalInformation"></h3>

        <div class="form-row clearfix">
          <div class="form-cell">
            <label for="geographic-zone">
              <span openlmis-message="label.geographic.zone"></span>
              <span class="label-required"> *</span>
            </label>

            <div class="form-field">
              <select id="geographic-zone" name="geographicZone" ng-model="facility.geographicZone.code"
                      ng-options="i.code as i.name for i in geographicZones" ng-required="true">
                <option value="" openlmis-message="label.select.geographic.zone"></option>
              </select>
        <span class="field-error" ng-show="facilityForm.geographicZone.$error.required && showError"
              openlmis-message="select.value">
        </span>
            </div>
          </div>

          <div class="form-cell">
            <label for="catchment-population" openlmis-message="label.catchment.population"></label>

            <div class="form-field">
              <input ng-model="facility.catchmentPopulation" id="catchment-population" ng-pattern="/^\d{1,9}$/"
                     name="catchmentPopulation" type="text" maxlength="9"/>
        <span class="field-error" ng-show="facilityForm.catchmentPopulation.$error.pattern"
              openlmis-message="integer.value">
        </span>
            </div>
          </div>
        </div>

        <div class="form-row clearfix">
          <div class="form-cell">
            <label for="latitude" openlmis-message="label.latitude"></label>

            <div class="form-field">
              <input ng-model="facility.latitude" ng-pattern="/^[+-]?0*\d{0,3}(\.\d{1,5}0*)?$/" id="latitude"
                     type="text" maxlength="10"
                     name="latitude"/>
        <span class="field-error" ng-show="facilityForm.latitude.$error.pattern"
              openlmis-message="label.latitude.value">
        </span>
            </div>
          </div>

          <div class="form-cell">
            <label for="longitude" openlmis-message="label.longitude"></label>

            <div class="form-field">
              <input ng-model="facility.longitude" ng-pattern="/^[+-]?0*\d{0,3}(\.\d{1,5}0*)?$/" name="longitude"
                     id="longitude" maxlength="10"
                     type="text"/>
        <span class="field-error" ng-show="facilityForm.longitude.$error.pattern"
              openlmis-message="label.longitude.value">
        </span>
            </div>
          </div>
        </div>

        <div class="form-row clearfix">
          <div class="form-cell">
            <label for="altitude" openlmis-message="create.facility.altitude"></label>

            <div class="form-field">
              <input ng-model="facility.altitude" ng-pattern="/^[+-]?0*\d{0,4}(\.\d{1,4}0*)?$/" name="altitude"
                     id="altitude"
                     type="text" maxlength="9"/>
        <span class="field-error" ng-show="facilityForm.altitude.$error.pattern"
              openlmis-message="create.facility.altitude.value">
        </span>
            </div>
          </div>
          <div class="form-cell">
            <div class="form-field" ng-show="facility.latitude !== ''" >
              <google-map center="{longitude: facility.longitude, latitude: facility.latitude}" zoom="16">
                <marker coords='facility'>
                </marker>
              </google-map>
            </div>
          </div>
        </div>
      </div>
      <!-- /form-group -->

      <div class="form-group">
        <h3 openlmis-message="create.facility.otherInformation"></h3>

        <div class="form-row clearfix">
          <div class="form-cell">
            <label for="cold-storage-gross-capacity"
                   openlmis-message="create.facility.coldStorageGrossCapacity"></label>

            <div class="form-field">
              <input ng-model="facility.coldStorageGrossCapacity" ng-pattern="/^\d{1,4}$|^\d{1,4}\.\d{1,4}$/"
                     name="coldStorageGrossCapacity" id="cold-storage-gross-capacity" type="text" maxlength="9"/>
        <span class="field-error" ng-show="facilityForm.coldStorageGrossCapacity.$error.pattern"
              openlmis-message="create.facility.coldStorageCapacity.value">
        </span>
            </div>
          </div>
        </div>

        <div class="form-row clearfix">
          <div class="form-cell">
            <label for="cold-storage-net-capacity" openlmis-message="create.facility.coldStorageNetCapacity"></label>

            <div class="form-field">
              <input ng-model="facility.coldStorageNetCapacity" id="cold-storage-net-capacity"
                     ng-pattern="/^\d{1,4}$|^\d{1,4}\.\d{1,4}$/" name="coldStorageNetCapacity" maxlength="9"
                     type="text"/>
        <span class="field-error" ng-show="facilityForm.coldStorageNetCapacity.$error.pattern"
              openlmis-message="create.facility.coldStorageCapacity.value">
        </span>
            </div>
          </div>
        </div>

        <div class="form-row clearfix">
          <div class="form-cell">
            <label openlmis-message="create.facility.electricityAvailable"></label>

            <div class="form-field radio-group">
              <input id="hasElectricityTrue" ng-model="facility.hasElectricity" type="radio" name="has-electricity"
                     ng-value="true"/>
              <strong openlmis-message="button.yes"></strong>
              &nbsp; &nbsp; &nbsp;
              <input id="hasElectricityFalse" ng-model="facility.hasElectricity" type="radio" name="has-electricity"
                     ng-value="false"/>
              <strong openlmis-message="button.no"></strong>
            </div>
          </div>

          <div class="form-cell">
            <label openlmis-message="create.facility.internetConnection"></label>

            <div class="form-field radio-group">
              <input id="isOnlineTrue" ng-model="facility.online" type="radio" name="is-online" ng-value="true"/>
              <strong openlmis-message="button.yes"></strong>
              &nbsp;
              &nbsp;
              &nbsp;
              <input id="isOnlineFalse" ng-model="facility.online" type="radio" name="is-online" ng-value="false"/>
              <strong openlmis-message="button.no"></strong>
            </div>
          </div>
        </div>

        <div class="form-row clearfix">
          <div class="form-cell">
            <label openlmis-message="create.facility.electronicSCC"></label>

            <div class="form-field radio-group">
              <input id="hasElectronicSccTrue" ng-model="facility.hasElectronicSCC" type="radio" name="has-electronic-scc"
                     ng-value="true"/><strong
                    openlmis-message="button.yes"></strong> &nbsp; &nbsp; &nbsp;
              <input id="hasElectronicSccFalse" ng-model="facility.hasElectronicSCC" type="radio" name="has-electronic-scc"
                     ng-value="false"/><strong
                    openlmis-message="button.no"></strong>
            </div>
          </div>

          <div class="form-cell">
            <label openlmis-message="create.facility.electronicDAR"></label>

            <div class="form-field radio-group">
              <input id="hasElectronicDARTrue" ng-model="facility.hasElectronicDAR" type="radio" name="has-electronic-dar"
                     ng-value="true"/><strong
                    openlmis-message="button.yes"></strong> &nbsp; &nbsp; &nbsp;
              <input id="hasElectronicDARFalse" ng-model="facility.hasElectronicDAR" type="radio" name="has-electronic-dar"
                     ng-value="false"/><strong
                    openlmis-message="button.no"></strong>
            </div>
          </div>
        </div>

        <div class="form-row clearfix">
          <div class="form-cell">
            <label openlmis-message="create.facility.enabled"></label>
            <ng-switch on="facility.enabled">
              <span id="facilityEnabledYes" ng-switch-when="true" openlmis-message="button.yes"></span>
              <span ng-switch-when="false" openlmis-message="button.no"></span>
            </ng-switch>
          </div>

          <div class="form-cell">
            <label openlmis-message="create.facility.suppliesOthers"></label>

            <div class="form-field radio-group">
              <input id="suppliesOthersYes" ng-model="facility.suppliesOthers" type="radio" name="supplies-others"
                     ng-value="true"/>
              <strong openlmis-message="button.yes"></strong>
              &nbsp; &nbsp; &nbsp;
              <input ng-model="facility.suppliesOthers" type="radio" name="supplies-others" ng-value="false"/>
              <strong openlmis-message="button.no"></strong>
            </div>
          </div>
        </div>

        <div class="form-row clearfix">
          <div class="form-cell full-width">
            <label for="comments" openlmis-message="create.facility.comments"></label>

            <div class="form-field">
              <input ng-model="facility.comment" id="comments" type="text" maxlength="500"/>
            </div>
          </div>
        </div>
      </div>
      <!-- /form-group -->
      <div class="form-group">
        <h3><span openlmis-message="label.price.schedule"></span></h3>
        <div class="form-row clearfix">
          <div class="form-cell">
            <label for="address-1" openlmis-message="label.price.schedule"></label>
            <div class="form-field">
              <select class="input-medium span3" ng-model="facility.priceSchedule.id">
                <option openlmis-message="select.price.schedule.category"></option>
                <option ng-repeat="s in priceSchedules" ng-selected="s.id == facility.priceSchedule.id" value="{{ s.id }}">{{s.code}} {{s.description}}</option>
              </select>
            </div>
          </div>
        </div>
      </div>

      <div class="form-group" ng-show="hasPermission('VIEW_FACILITY_INTEGRATION')">
        <h3 openlmis-message="create.facility.interface.mapping"></h3>

        <div class="form-row clearfix">
          <div class="form-cell programs-table">
            <table class="table table-striped table-bordered">
              <thead>
              <tr>
                <th openlmis-message="create.facility.interface.application"></th>
                <th openlmis-message="create.facility.interface.mappingId"></th>
                <th openlmis-message="create.facility.interface.active"></th>
                <th></th>
              </tr>
              </thead>
              <tbody>
              <tr ng-repeat="mapping in facility.interfaceMappings">
                <td ng-bind="mapping.interfaceId.name"></td>
                <td  ng-bind="mapping.mappedId"></td>
                <td  ng-show="mapping.active">✓</td>
                <td  ng-show="!mapping.active">X</td>
                <td><a href="" class="close" id="removeMapping{{$index}}"
                       ng-click="showRemoveInterfaceMappingConfirmDialog(mapping)"
                       openlmis-message="create.facility.removeProgram"></a></td>
              </tr>
              <tr class="add-supported-program-row">
                <td>
                  <select id="interfaces" ng-model="interfaceMapping.interfaceId"
                          ng-options="i.id as i.name for i in interfacesToDisplay">
                    <option value="" openlmis-message="interfaceSelectMessage"></option>
                  </select>
                         <span class="field-error" ng-show="showInterfaceRequiredError && interfaceMapping.interfaceId" openlmis-message="missing.value">
                        </span>
                </td>
                <td><input type="text" ng-model="interfaceMapping.mappedId" id="mappingId" placeholder="Mapped facility Id"
                           ng-disabled="!interfaceMapping.interfaceId" ng-disabled="!interfaceMapping.interfaceId"/>
                      <span class="field-error"  ng-show="showMappingIdRequiredError  && interfaceMapping.interfaceId" openlmis-message="missing.value">
                        </span>
                </td>
                <td><input type="checkbox" value="true" ng-model="interfaceMapping.active" ng-disabled="!interfaceMapping.interfaceId"></td>
                <td><input type="button" class="btn btn-primary" id="interface-mapping-add"
                           openlmis-message="button.add"
                           ng-disabled="!interfaceMapping.interfaceId"
                           ng-click="addInterfaceMapping(interfaceMapping)"></td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div form-toolbar id="action_buttons" class="action-buttons">
        <div class="form-cell button-row">
          <input id="saveButton" type="submit" id="save-button" class="btn btn-primary save-button"
                 openlmis-message="button.save"/>
          <input id="cancelButton" type="button" class="btn btn-cancel cancel-button" openlmis-message="button.cancel"
                 ng-click="cancel()"/>
          <input id="enableButton" type="button" class="btn btn-primary enable-button"
                 ng-show="facility.id!=null && !facility.enabled"
                 ng-click="showConfirmFacilityEnable()"
                 openlmis-message="button.enable"/>
          <input id="disableButton" type="button" class="btn btn-danger delete-button"
                 ng-show="facility.id != null && facility.enabled"
                 ng-click="showConfirmFacilityDisableWindow()" openlmis-message="button.disable"/>
        </div>


        <div class="toolbar-error" id="saveErrorMsgDiv">
          <span openlmis-message="error" ng-show="error"></span>&nbsp;
          <span ng-show="errorProgram" ng-bind="errorProgram"></span>
        </div>
        <div class="toolbar-success" id="saveSuccessMsgDiv" openlmis-message="message" ng-show="message"></div>
      </div>


  <div class="form-row clearfix" ng-show="images.length > 0">
    <div ng-repeat="image in images">
      <img class="form-cell" ng-show="image.firstPicture" alt="Picture of Facility" ng-src="data:image/png;base64,{{ image.firstPicture }}" />
      <img class="form-cell" ng-show="image.secondPicture" alt="Picture of Facility" ng-src="data:image/png;base64,{{ image.secondPicture }}" />
      <img class="form-cell" ng-show="image.thirdPicture" alt="Picture of Facility" ng-src="data:image/png;base64,{{ image.thirdPicture }}" />
      <img class="form-cell" ng-show="image.fourthPicture" alt="Picture of Facility" ng-src="data:image/png;base64,{{ image.fourthPicture }}" />
      <img class="form-cell" ng-show="image.fifthPicture" alt="Picture of Facility" ng-src="data:image/png;base64,{{ image.fifthPicture }}" />
    </div>
    </div>
      </div>

  </form>


  <div isa-coefficient-modal></div>


</div>
